<template>
  <div>
    <el-dialog :destroy-on-close="true" append-to-body :close-on-click-modal="false" custom-class="app-user-role-manage"
               title="权限分配"
               :visible.sync="roleManageDialogVisible" width="70%" :before-close="handleClose">
      <div class="role-space">
        <div>
          主控台
        </div>
        <div>
          <el-tag :type="userPermissions.includes('main:start')?'':'info'" v-permission="'main:start'"
                  @click="savePermissionBtn('main:start')">启动
          </el-tag>
          <el-tag :type="userPermissions.includes('main:stop')?'':'info'" v-permission="'main:stop'"
                  @click="savePermissionBtn('main:stop')">暂停
          </el-tag>
          <el-tag :type="userPermissions.includes('main:reset')?'':'info'" v-permission="'main:reset'"
                  @click="savePermissionBtn('main:reset')">
            复位
          </el-tag>
          <el-tag :type="userPermissions.includes('main:open:cylinder')?'':'info'" v-permission="'main:open:cylinder'"
                  @click="savePermissionBtn('main:open:cylinder')">打开气缸
          </el-tag>
          <el-tag :type="userPermissions.includes('main:pass:car')?'':'info'" v-permission="'main:pass:car'"
                  @click="savePermissionBtn('main:pass:car')">放行小车
          </el-tag>
          <el-tag :type="userPermissions.includes('main:untightening')?'':'info'" v-permission="'main:untightening'"
                  @click="savePermissionBtn('main:untightening')">解锁拧紧抢
          </el-tag>
          <el-tag :type="userPermissions.includes('main:repair')?'':'info'" v-permission="'main:repair'"
                  @click="savePermissionBtn('main:repair')">
            补拧
          </el-tag>
        </div>
      </div>
      <div class="role-space">
        <div>
          用户
        </div>
        <div>
          <el-tag :type="userPermissions.includes('user:view')?'':'info'" v-permission="'user:view'"
                  @click="savePermissionBtn('user:view')">
            查看
          </el-tag>
          <el-tag :type="userPermissions.includes('user:add')?'':'info'" v-permission="'user:add'"
                  @click="savePermissionBtn('user:add')">
            添加用户
          </el-tag>
          <el-tag :type="userPermissions.includes('user:delete')?'':'info'" v-permission="'user:delete'"
                  @click="savePermissionBtn('user:delete')">删除
          </el-tag>
          <el-tag :type="userPermissions.includes('user:assign')?'':'info'" v-permission="'user:assign'"
                  @click="savePermissionBtn('user:assign')">
            分配权限
          </el-tag>
        </div>
      </div>
      <div class="role-space">
        <div>
          配方
        </div>
        <div>
          <el-tag :type="userPermissions.includes('recipe:view')?'':'info'" v-permission="'recipe:view'"
                  @click="savePermissionBtn('recipe:view')">查看
          </el-tag>
          <el-tag :type="userPermissions.includes('recipe:add')?'':'info'" v-permission="'recipe:add'"
                  @click="savePermissionBtn('recipe:add')">
            添加配方
          </el-tag>
          <el-tag :type="userPermissions.includes('recipe:edit')?'':'info'" v-permission="'recipe:edit'"
                  @click="savePermissionBtn('recipe:edit')">编辑
          </el-tag>
          <el-tag :type="userPermissions.includes('recipe:view:pn')?'':'info'" v-permission="'recipe:view:pn'"
                  @click="savePermissionBtn('recipe:view:pn')">查看PN
          </el-tag>
          <el-tag :type="userPermissions.includes('recipe:bn')?'':'info'" v-permission="'recipe:bn'"
                  @click="savePermissionBtn('recipe:bn')">补拧图
          </el-tag>
          <el-tag :type="userPermissions.includes('recipe:delete')?'':'info'" v-permission="'recipe:delete'"
                  @click="savePermissionBtn('recipe:delete')">删除
          </el-tag>
        </div>
      </div>

      <div class="role-space">
        <div>
          生产
        </div>
        <div>
          <el-tag :type="userPermissions.includes('prod:view')?'':'info'" v-permission="'prod:view'"
                  @click="savePermissionBtn('prod:view')">
            查看
          </el-tag>
          <el-tag :type="userPermissions.includes('prod:upload:upper')?'':'info'" v-permission="'prod:upload:upper'"
                  @click="savePermissionBtn('prod:upload:upper')">
            上传上盖
          </el-tag>
          <el-tag :type="userPermissions.includes('prod:upload:front')?'':'info'" v-permission="'prod:upload:front'"
                  @click="savePermissionBtn('prod:upload:front')">
            上传前面板
          </el-tag>
          <el-tag :type="userPermissions.includes('prod:pass')?'':'info'" v-permission="'prod:pass'"
                  @click="savePermissionBtn('prod:pass')">过站
          </el-tag>
          <el-tag :type="userPermissions.includes('prod:detail')?'':'info'" v-permission="'prod:detail'"
                  @click="savePermissionBtn('prod:detail')">详情
          </el-tag>
        </div>
      </div>

      <div class="role-space">
        <div>
          设置
        </div>
        <div>
          <el-tag :type="userPermissions.includes('setting:view')?'':'info'" v-permission="'prod:view'"
                  @click="savePermissionBtn('setting:view')">查看
          </el-tag>
          <el-tag :type="userPermissions.includes('setting:mes')?'':'info'" v-permission="'prod:mes'"
                  @click="savePermissionBtn('setting:mes')">
            保存“MES接口”
          </el-tag>
          <!--          <el-tag :type="userPermissions.includes('setting:mes:coll')?'':'info'"-->
          <!--                  @click="savePermissionBtn('setting:mes:coll')">-->
          <!--            保存“MES上传数据接口”-->
          <!--          </el-tag>-->
          <el-tag :type="userPermissions.includes('setting:agv')?'':'info'" v-permission="'setting:agv'"
                  @click="savePermissionBtn('setting:agv')">
            保存“AGV”
          </el-tag>
          <el-tag :type="userPermissions.includes('setting:bn')?'':'info'" v-permission="'setting:bn'"
                  @click="savePermissionBtn('setting:bn')">
            保存“补拧抢”
          </el-tag>
          <el-tag :type="userPermissions.includes('setting:line')?'':'info'" v-permission="'setting:line'"
                  @click="savePermissionBtn('setting:line')">
            保存“产线过站”
          </el-tag>
          <el-tag :type="userPermissions.includes('setting:other')?'':'info'" v-permission="'setting:other'"
                  @click="savePermissionBtn('setting:other')">
            保存“其他设置”
          </el-tag>
        </div>
      </div>
      <div class="role-space">
        <div>
          设备
        </div>
        <div>
          <el-tag :type="userPermissions.includes('derive:view')?'':'info'" v-permission="'derive:view'"
                  @click="savePermissionBtn('derive:view')">查看
          </el-tag>
          <el-tag :type="userPermissions.includes('derive:edit')?'':'info'" v-permission="'derive:edit'"
                  @click="savePermissionBtn('derive:edit')">修改
          </el-tag>
        </div>
      </div>
      <div class="role-space">
        <div>
          日志
        </div>
        <div>
          <el-tag :type="userPermissions.includes('log:edit')?'':'info'" v-permission="'log:edit'"
                  @click="savePermissionBtn('log:edit')">查看
          </el-tag>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
module.exports = {
  name: 'RoleManageDialog',
  props: {
    show: { type: Boolean, default: false },
    userId: { type: Number }
  },
  watch: {
    show (v) {
      if (v) {
        this.roleManageDialogVisible = v;
        this.getPermission();
      }
    }
  },
  data () {
    return {
      permissions: [],
      userPermissions: [],
      roleManageDialogVisible: false,
    }
  },
  methods: {
    getPermission () {
      console.log('=============',this.userId)
      GetPermissionListApi({ id: this.userId }, (user) => {
        console.log(user);
        this.userPermissions = user.permission;
      });
    },
    savePermissionBtn (Code) {
      let exits = true;
      if (!this.userPermissions.includes(Code)) {
        this.userPermissions.push(Code);
        AddPermissionApi({ UserId: this.userId, Code: Code }).then(r => {
        });
      } else {
        let index = this.userPermissions.findIndex(r => r === Code);
        this.userPermissions.splice(index, 1);
        exits = false;
        DeletePermissionApi(this.userId, Code).then(r => {
        });
      }
    },
    /**
     * 关闭窗口
     */
    handleClose () {
      this.roleManageDialogVisible = false;
      this.$emit('close');
    },
  }
}
</script>

<style>
.app-user-role-manage {
  .role-space {

    margin-top: 15px;
    border: 1px solid rgb(234, 238, 251);

    > div {

    }
  }

  .role-space > div:nth-child(1) {
    height: 44px;
    border-bottom: 1px solid rgb(234, 238, 251);
    padding-left: 10px;
    display: flex;
    align-items: center;
  }

  .role-space > div:nth-child(2) {
    padding: 20px;
    display: flex;
    align-items: center;

    > span {
      cursor: pointer;
      margin: 0 10px;
      padding: 0 20px;
    }
  }
}
</style>